<div *ngIf="pillarPrinciples">
    <div class="text-center">
        <img [attr.src]="'/assets/img/principle/'+pillarId+(pillarData && pillarData.length > 0 ? '_on' : '_off')+'.png'" />
        <h5 class="mt-2 text-dark-grey">{{ pillarName }}</h5>
    </div>

    <div *ngFor="let principle of principles" class="card shadow principle-card mt-4" [ngClass]="{'pointer': pillarPrinciples[principle.id]}" [routerLink]="pillarPrinciples[principle.id] ? ['../pillar', pillarId] : []">
        <div class="card-body">
            <h6 class="text-dark-grey">PRINCIPLE {{ principle.id }}</h6>
            <p>{{ principle.description }}</p>

            <div class="mt-3 pt-3" [ngClass]="{'has-info': (pillarPrinciples[principle.id] || gcSummary.overallCompanyAssessment === gCAssessment.Compliant || hasBothLists)}">
                <div *ngIf="pillarPrinciples[principle.id]">
                    <div *ngIf="pillarPrinciples[principle.id].principleAssessment === gCAssessment.Watchlist" class="d-flex">
                        <img src="/assets/icons-svg/icon-watchlist.svg" class="global-compact-icon float-left mr-2" />
                        Watchlist
                    </div>
                    <div *ngIf="pillarPrinciples[principle.id].principleAssessment === gCAssessment['Non-Compliant']" class="d-flex">
                        <img src="/assets/icons-svg/icon-not-compliant.svg" class="global-compact-icon float-left mr-2" />
                        Non-Compliant
                    </div>
                </div>
                <div *ngIf="(gcSummary.overallCompanyAssessment === gCAssessment.Compliant) || (hasBothLists && !pillarPrinciples[principle.id])" class="d-flex">
                    No evidence of relevant controversies
                </div>
            </div>
        </div>
    </div>
</div>